// Fitters.tsx
import { Button, Input, DatePicker, Form } from "antd";
// import moment from "moment";
import { useTableStore } from "../../../../stores";
import { useMediaQuery } from "react-responsive";

const { RangePicker } = DatePicker;

// 定义表单值的类型
interface FormValues {
  channel: string;
  network: string;
  country: string;
  dateRange: any | null;
}

const Fitter = () => {
  const { setParams } = useTableStore();
  const [form] = Form.useForm();
  const isMobile = useMediaQuery({ maxWidth: 767 }); // 假设 767px 及以下为移动端

  const handleSearch = (values: FormValues) => {
    const [start_t, end_t] = values.dateRange || [];
    setParams({
      channel: values.channel,
      network: values.network,
      country: values.country,
      start_t: start_t?.unix(),
      end_t: end_t?.unix(),
    });
  };

  return (
    <Form
      form={form}
      // 移动端使用垂直布局，非移动端使用内联布局
      layout={isMobile ? "vertical" : "inline"}
      onFinish={handleSearch}
      scrollToFirstError
    >
      <Form.Item name="channel" label="Channel">
        <Input placeholder="Enter channel" />
      </Form.Item>
      <Form.Item name="network" label="Network">
        <Input placeholder="Enter network" />
      </Form.Item>
      <Form.Item name="country" label="Country">
        <Input placeholder="Enter country" />
      </Form.Item>
      <Form.Item name="dateRange" label="Date Range">
        <RangePicker showTime />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Search
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Fitter;
